@use '@scss/common' as *;
@use '@forms/fields/shared.scss';

.formState {
  & > * {
    margin: 0;
    margin-bottom: 1rem;

    &:last-child {
      margin-bottom: 2rem;
    }
  }

  @include mid-break {
    & > * {
      margin-bottom: 0.5rem;
    }
  }
}

.sidebarCell {
  position: relative;
  height: 100%;
}

.sidebar {
  position: sticky;
  top: var(--page-padding-top);
  display: flex;
  flex-direction: column;
  gap: 1rem;

  @include mid-break {
    position: static;
    top: unset;
    gap: 1rem;
  }
}

.appPermissions {
  margin: 0;

  a {
    color: var(--theme-blue-500);
    text-decoration: underline;
  }
}

.noTeams {
  margin-bottom: 2rem;
  color: var(--theme-error-500);
}

.template {
  @include shared.formInput;
  & {
    display: flex;
    align-items: center;
  }
}

.templateIcon {
  width: 1rem;
  height: 1rem;
  position: relative;
  top: -1px;
}

.templateName {
  margin: 0;
  margin-left: 0.5rem;
}

.createTeamLink {
  background-color: transparent;
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  border: 0;
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.submit {
  align-self: flex-start;
}

.breadcrumbsWrap {
  margin-bottom: 2rem;
}
